<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="apple-mobile-web-app-status-bar-style" content="red" />
    <title>这样的长沙，是你的2016吗？</title>
    <script src="https://staticfile.qnssl.com/jquery/2.2.1/jquery.min.js"></script>
    <script src="//wximg.qq.com/wxp/libs/wxmoment/0.0.4/wxmoment.min.js"></script>
    <script src="{{asset('dist/wechat/js/load.js')}}"></script>
    <script src="{{asset('dist/wechat/js/swiper.animate.min.js')}}"></script>
    <script src="https://cdn.staticfile.org/Swiper/3.4.0/js/swiper.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.0.2/weui.min.css" />
    <link rel="stylesheet" href="http://www.ebama.net/data/attachment/css/swiper.min.css">
    <link rel="stylesheet" href="{{asset('dist/wechat/css/animate.min.css')}}">
    <link rel="stylesheet" href="{{asset('dist/wechat/css/index.css')}}">
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        wx.config( <?php echo  $js->config(array(
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage'
        ), false) ?>);

        share('这样的长沙，是你的2016吗？','<?php echo 'http://'.$_SERVER['HTTP_HOST'].'/wechat/share'?>','https://ooo.0o0.ooo/2016/12/23/585cf17785e1e.jpg','城市表情录·2016你与长沙的深情对视');

        function share(share_title,share_link,share_imgUrl,share_desc,share_type,share_dataUrl) {
            wx.ready(function () {
                wx.onMenuShareTimeline({
                    title:share_title,
                    link:share_link,
                    imgUrl:share_imgUrl,
                    success:function(data){
                        console.log(data);
                    },
                    cancel:function () { //取消分享函数

                    }
                });

                wx.onMenuShareAppMessage({
                    title:share_title, // 分享标题
                    desc: share_desc, // 分享描述
                    link:share_link,// 分享链接
                    imgUrl:share_imgUrl, // 分享图标
                    type: share_type, // 分享类型,music、video或link，不填默认为link
                    dataUrl:share_dataUrl, // 如果type是music或video，则要提供数据链接，默认为空
                    success:function(data){
                        console.log(data);
                    },
                    cancel:function () { //取消分享函数

                    }
                });
            });
        }

        function send(){
            $.ajax({
                url:"{{url('wechat/share/send')}}",
                success:function(data){
                    if(data.success == true){
						$.weui.alert({text: data.msg});
                       // alert(data.msg);
                    }else{
						$.weui.alert({text: data.msg});
                        //alert(data.msg);
                    }
                }
            });
        }
    </script>
</head>
<body>

<div class="loading_mask">
    <div class="sk-cube-grid">
        <div class="sk-cube sk-cube1"></div>
        <div class="sk-cube sk-cube2"></div>
        <div class="sk-cube sk-cube3"></div>
        <div class="sk-cube sk-cube4"></div>
        <div class="sk-cube sk-cube5"></div>
        <div class="sk-cube sk-cube6"></div>
        <div class="sk-cube sk-cube7"></div>
        <div class="sk-cube sk-cube8"></div>
        <div class="sk-cube sk-cube9"></div>
    </div>
</div>

<div class="swiper-container">
   <div class="swiper-wrapper">
           <!--slide1-->
       <section class="swiper-slide swiper-slide1">
           <img src="{{asset('dist/wechat/img/bwbq/1/1-1.png')}}"  style="position: absolute;top: 14%;left: 40%;width: 20%;">
            <img src="{{asset('dist/wechat/img/bwbq/1/1-2.png')}}" style="position: absolute;top: 19%;left: 40%;width: 20%;">
           <img src="{{asset('dist/wechat/img/bwbq/1/1-3.png')}}" style="position: absolute;top: 22%;left: 47%;width: 14%;">
            <img src="{{asset('dist/wechat/img/bwbq/1/1-4.png')}}" style="position: absolute;top: 25%;left: 40%;width: 7%;">
        </section>
        <!--slide2-->
       <section class="swiper-slide swiper-slide2">
           <img src="{{asset('dist/wechat/img/bwbq/2/2-1.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s" style="position: absolute;top: 30%;left: 42.5%;width: 15%;">
           <img src="{{asset('dist/wechat/img/bwbq/2/2-2.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.0s" style="position: absolute;top: 35%;left: 25%;width: 50%;">
            <img src="{{asset('dist/wechat/img/bwbq/2/2-3.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.5s" style="position: absolute;top: 40%;left: 28.5%;width: 43%;">
            <img src="{{asset('dist/wechat/img/bwbq/2/2-4.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="2.0s" style="position: absolute;top: 50%;left: 38%;width: 24%;">
            <img src="{{asset('dist/wechat/img/bwbq/2/2-5.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="2.5s" style="position: absolute;top: 55%;left: 21%;width: 58%;">
        </section>
        <!--slide3-->
       <section class="swiper-slide swiper-slide3">
        </section>
        <!--slide4-->
        <section class="swiper-slide swiper-slide4">
           <img src="{{asset('dist/wechat/img/bwbq/3/3-1.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s" style="position: absolute;top: 30%;left: 42.5%;width: 15%;">
           <img src="{{asset('dist/wechat/img/bwbq/3/3-2.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.0s" style="position: absolute;top: 35%;left: 35%;width: 30%;">
           <img src="{{asset('dist/wechat/img/bwbq/3/3-3.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.5s" style="position: absolute;top: 40%;left: 41%;width: 18%;">
           <img src="{{asset('dist/wechat/img/bwbq/3/3-4.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="2.0s" style="position: absolute;top: 50%;left: 35%;width: 30%;">
            <img src="{{asset('dist/wechat/img/bwbq/3/3-5.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="2.5s" style="position: absolute;top: 55%;left: 42.5%;width: 15%;">
       </section>
        <!--slide5-->
       <section class="swiper-slide swiper-slide5">
       </section>
       <!--slide6-->
       <section class="swiper-slide swiper-slide6">
           <img src="{{asset('dist/wechat/img/bwbq/4/4-1.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s" style="position: absolute;top: 30%;left: 41%;width: 18%;">
           <img src="{{asset('dist/wechat/img/bwbq/4/4-2.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.0s" style="position: absolute;top: 35%;left: 41%;width: 18%;">
            <img src="{{asset('dist/wechat/img/bwbq/4/4-3.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.5s" style="position: absolute;top: 45%;left: 32.5%;width: 35%;">
           <img src="{{asset('dist/wechat/img/bwbq/4/4-4.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="2.0s" style="position: absolute;top: 50%;left: 41%;width: 18%;">
       </section>
       <!--slide7-->
        <section class="swiper-slide swiper-slide7">
        </section>
        <!--slide8-->
       <section class="swiper-slide swiper-slide8">
            <img src="{{asset('dist/wechat/img/bwbq/5/5-1.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s" style="position: absolute;top: 30%;left: 44%;width: 12%;">
            <img src="{{asset('dist/wechat/img/bwbq/5/5-2.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.0s" style="position: absolute;top: 35%;left: 37.5%;width: 25%;">
            <img src="{{asset('dist/wechat/img/bwbq/5/5-3.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.5s" style="position: absolute;top: 50%;left: 44%;width: 12%;">
            <img src="{{asset('dist/wechat/img/bwbq/5/5-4.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="2.0s" style="position: absolute;top: 55%;left: 37.5%;width: 25%;">
        </section>
        <!--slide9-->
        <section class="swiper-slide swiper-slide9">
        </section>
       <!--slide10-->
       <section class="swiper-slide swiper-slide10">
           <img src="{{asset('dist/wechat/img/bwbq/6/6-1.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s" style="position: absolute;top: 30%;left: 25%;width: 50%;">
            <img src="{{asset('dist/wechat/img/bwbq/6/6-2.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.0s" style="position: absolute;top: 35%;left: 42%;width: 16%;">
            <img src="{{asset('dist/wechat/img/bwbq/6/6-3.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.5s" style="position: absolute;top: 50%;left: 31%;width: 38%;">
            <img src="{{asset('dist/wechat/img/bwbq/6/6-4.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="2.0s" style="position: absolute;top: 55%;left: 44%;width: 12%;">
        </section>
        <!--slide11-->
        <section class="swiper-slide swiper-slide11">
        </section>
        <!--slide12-->
        <section class="swiper-slide swiper-slide12">
            <img src="{{asset('dist/wechat/img/bwbq/7/7-1.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s" style="position: absolute;top: 30%;left: 40%;width: 15%;">
            <img src="{{asset('dist/wechat/img/bwbq/7/7-2.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.0s" style="position: absolute;top: 35%;left: 20%;width: 60%;">
            <img src="{{asset('dist/wechat/img/bwbq/7/7-3.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.5s" style="position: absolute;top: 50%;left: 17.5%;width: 65%;">
            <img src="{{asset('dist/wechat/img/bwbq/7/7-4.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="2.0s" style="position: absolute;top: 55%;left: 25%;width: 50%;">
            <img src="{{asset('dist/wechat/img/bwbq/7/7-5.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="2.5s" style="position: absolute;top: 60%;left: 40%;width: 20%;">
        </section>
        <!--slide13-->
        <section class="swiper-slide swiper-slide13">
   </section>
   <!--slide14-->
       <section class="swiper-slide swiper-slide14">
           <img src="{{asset('dist/wechat/img/bwbq/8/8-1.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s" style="position: absolute;top: 20%;left: 27.5%;width: 45%;">
           <img src="{{asset('dist/wechat/img/bwbq/8/8-2.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.0s" style="position: absolute;top: 25%;left: 27.5%;width: 45%;">
           <img src="{{asset('dist/wechat/img/bwbq/8/8-3.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.5s" style="position: absolute;top: 30%;left: 12.5%;width: 75%;">
           <img src="{{asset('dist/wechat/img/bwbq/8/8-4.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="2.0s" style="position: absolute;top: 35%;left: 30%;width: 40%;">
           <img src="{{asset('dist/wechat/img/bwbq/8/8-5.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="2.5s" style="position: absolute;top: 60%;left: 20%;width: 60%;">
           <img src="{{asset('dist/wechat/img/bwbq/8/8-6.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="3.0s" style="position: absolute;top: 70%;left: 20%;width: 60%;">
       </section>
       <!--slide15-->
       <section class="swiper-slide swiper-slide15">
           <img src="{{asset('dist/wechat/img/bwbq/9/9-1.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s" style="position: absolute;top: 20%;left: 15%;width: 70%;">
           <img src="{{asset('dist/wechat/img/bwbq/9/9-2.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.0s" style="position: absolute;top: 43%;left: 10%;width: 80%;">
           <img src="{{asset('dist/wechat/img/bwbq/9/9-3.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="1.5s" style="position: absolute;top: 48%;left: 27.5%;width: 45%;">
           <img src="{{asset('dist/wechat/img/bwbq/9/9-4.png')}}" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="2.0s" style="position: absolute;top: 60%;left: 27.5%;width: 45%;">
           <img src="{{asset('dist/wechat/img/bwbq/9/9-5.png')}}" onclick="showpic()" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="2s" swiper-animate-delay="2.5s" style="position: absolute;top: 77%;left: 25%;width: 50%;">
        </section>
    </div>
   <img id="mask" src="{{asset('dist/wechat/img/bwbq/mark.png')}}" style="display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 9999999">
   <img style="width: 20px; height: 15px; top: 460px; left: 150px;" id="array" src="{{asset('dist/wechat/img/bwbq/arrow.png')}}" class="resize">
    <audio id="Jaudio" src="{{asset('dist/wechat/mp3/bg.mp3')}}" preload="auto" autoplay="autoplay" loop="loop"></audio>
</div>
<section class="swiper-slide16">
    <article class="zzsc-container">
        <div id="clipArea"></div>
        <div class="upfile">
            <input type="file" id="file" name="pic" draggable="false" single accept="image/jpg,image/jpeg,image/png,image/gif"/>
        </div>
        <button id="clipBtn"></button>
    </article>
</section>
<section class="swiper-slide17" style="display: none">
    <img src="{{asset('dist/wechat/img/bwbq/11/10-1.png')}}" style="position: absolute;top: 30%;left: 15%;width: 70%;">
	<img src="{{asset('dist/wechat/img/bwbq/11/10-2.png')}}" style="position: absolute; width:42%; top:52%; left: 29%; ">
</section>
<div id="loadingToast" style="display:none;">
	<div class="weui-mask_transparent"></div>
	<div class="weui-toast">
	<i class="weui-loading weui-icon_toast"></i>
	<p class="weui-toast__content">照片上传中</p>
	</div>
</div>
<div class="weui_dialog_alert" style="display: none;">
	<div class="weui-mask"></div>
	<div class="weui-dialog">
		<div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
		<div class="weui-dialog__bd" style="max-height:200px;overflow:scroll;">弹窗内容，告知当前页面信息等</div>
		<div class="weui-dialog__ft">
			<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
		</div>
	</div>
</div>
<script>
function share() {
        $('#mask').show();
    }
//function audioAutoPlay(id){
//var audio = document.getElementById(id);
//audio.play();
//document.addEventListener("WeixinJSBridgeReady", function () {
//audio.play();
//}, false);
//}
//audioAutoPlay('Jaudio');
</script>
<script src="{{asset('dist/wechat/js/upload/iscroll-zoom.js')}}"></script>
<script src="{{asset('dist/wechat/js/upload/hammer.js')}}"></script>
<script src="{{asset('dist/wechat/js/upload/jquery.photoClip.js')}}"></script>
<script src="{{asset('dist/wechat/js/upload/exif.js')}}"></script>
<script>
	//获取照片的元信息（拍摄方向）
	function getPhotoOrientation(img){
		var orient;
		EXIF.getData(img, function () {
			orient = EXIF.getTag(this, 'Orientation');
		});
		return orient;
	}
</script>
<script>
	$.weui = {};
	$.weui.alert = function(options){
		options = $.extend({title: '提示', text: '警告内容'}, options);
		var $alert = $('.weui_dialog_alert');
		$alert.find('.weui-dialog__title').text(options.title);
		$alert.find('.weui-dialog__bd').html(options.text);
		$alert.on('touchend click', '.weui-dialog__btn', function(){
			$alert.hide();
		});
		$alert.show();
	};
    var token = "{{ csrf_token() }}";
    $(function () {
        $("#clipArea").photoClip({
            width: 320,
            height: 320,
            file: "#file",
			view: "#view",
            ok: "#clipBtn",
            loadStart: function() {
                console.log("照片读取中");
            },
            loadComplete: function() {
                console.log("照片读取完成");
            },
            clipFinish: function(dataURL) {
                $.ajax({
                    type:'POST',
                    url:'{{url('wechat/share/upload/img')}}',
                    data:{
                        base64:dataURL,_token:token,
                    },
					beforeSend: function () {  
						// 禁用按钮防止重复提交  
						$('#loadingToast').css('display','block'); 
					},
                    success:function (data) {
					    console.log(data);
					    if(data.success == true){
							$.weui.alert({text: "上传成功！"});
                           // $.weui.alert({text: data.msg});
                            $('.swiper-slide16').hide();
                            $('.swiper-slide17').show();
                            $('.swiper-slide17 img').addClass('fadedown');
							 //$.weui.alert({text: "领取红包成功!请注意查收！"});
							 
                        }else{
							$.weui.alert({text: data.msg});
                        }
						//$.weui.alert({text: "上传成功！"});
                    },
					complete:function(){
						$('#loadingToast').css('display','none'); 
					}
                });
            }
        });
    });
</script>
<script>
    function view() {
        return {
            w: document.documentElement.clientWidth,
            h: document.documentElement.clientHeight
        };
    }
    document.body.style.height=view().h+"px";
</script>
<script>
    scaleW = window.innerWidth / 320;
    scaleH = window.innerHeight / 480;
    var resizes = document.querySelectorAll('.resize');
    for (var j = 0; j < resizes.length; j++) {
        resizes[j].style.width = parseInt(resizes[j].style.width) * scaleW + 'px';
        resizes[j].style.height = parseInt(resizes[j].style.height) * scaleH + 'px';
        resizes[j].style.top = parseInt(resizes[j].style.top) * scaleH + 'px';
        resizes[j].style.left = parseInt(resizes[j].style.left) * scaleW + 'px';
    }

    var mySwiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        pagination: '.swiper-pagination',
        //virtualTranslate : true,
        mousewheelControl: true,
        onInit: function (swiper) {
            swiperAnimateCache(swiper);
            swiperAnimate(swiper);

        },
        onSlideChangeEnd: function (swiper) {
            //切换结束后触发
            swiperAnimate(swiper);
            var sindex = mySwiper.activeIndex;
            if (sindex == 14) {
                $("#array").hide();
                LockUpPage();
                LockPage();
            }
        },
        onTransitionEnd: function (swiper) {
            swiperAnimate(swiper);
        },

        watchSlidesProgress: true,

        onProgress: function (swiper) {
            for (var i = 0; i < swiper.slides.length; i++) {
                var slide = swiper.slides[i];
                var progress = slide.progress;
                var translate = progress * swiper.height / 4;
                scale = 1 - Math.min(Math.abs(progress * 0.5), 1);
                var opacity = 1 - Math.min(Math.abs(progress / 2), 0.5);
                slide.style.opacity = opacity;
                es = slide.style;
                es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,' + translate + 'px,-' + translate;
            }
        }
    });
    function showpic(){
        $(".swiper-container").hide();
		$(".swiper-slide16").show();
    }
    function sss() {
        UnLockPage();
        xiayiye();
    }
    //下一页
    function xiayiye() {

        mySwiper.slideNext();
    }
    //上一页
    function shangyiye() {

        mySwiper.slidePrev();
    }
    //跳转页面
    function tiaozhuan(pageindex) {

        //pageindex 索引值  从0开始
        mySwiper.slideTo(pageindex);
    }
    //锁定向下滑动
    function LockPage() {
        mySwiper.lockSwipeToNext()
    }
    //锁定向上滑动
    function LockUpPage(){
        mySwiper.lockSwipeToPrev();
    }
    //解除锁定
    function UnLockPage() {
        mySwiper.unlockSwipeToNext()
    }
</script>
<!--  统计代码 
<div style="display:none">
    <script src="https://s11.cnzz.com/z_stat.php?id=1260998000&web_id=1260998000" language="JavaScript"></script>
</div>

</body>
</html>
